<template>
  <div class="container">
    <el-card class="box-card" v-loading="loading">
      <div class="header">
        <span>说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          @click="$router.push('/questions/new')"
          size="mini"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 第一列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="学科" prop="subjectID">
                <el-select
                  class="input"
                  v-model="ruleForm.subjectID"
                  placeholder="请选择"
                  @change="simpleChange"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in simpleList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select
                  class="input"
                  v-model="ruleForm.catalogID"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in subjectList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="标签" prop="tags">
                <el-select
                  class="input"
                  v-model="ruleForm.tags"
                  placeholder="请选择"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in tagsList"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="ruleForm.keyword"
                  placeholder="根据题干搜索"
                ></el-input>
              </el-form-item></div
          ></el-col>
        </el-row>

        <!-- 第二列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="试题类型" prop="questionType">
                <el-select
                  class="input"
                  v-model="ruleForm.questionType"
                  placeholder="请选择"
                >
                  <el-option label="" value="简单"></el-option>
                  <el-option label="" value="多选"></el-option>
                  <el-option label="" value="简答"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="难度" prop="difficulty">
                <el-select
                  class="input"
                  v-model="ruleForm.difficulty"
                  placeholder="请选择"
                >
                  <el-option label="" value="简单"></el-option>
                  <el-option label="" value="一般"></el-option>
                  <el-option label="" value="困难"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="方向" prop="direction">
                <el-select
                  class="input"
                  v-model="ruleForm.direction"
                  placeholder="请选择"
                >
                  <el-option label="" value="o2o"></el-option>
                  <el-option label="" value="外包服务"></el-option>
                  <el-option label="" value="企业服务"></el-option>
                  <el-option label="" value="互联网金融"></el-option>
                  <el-option label="" value="企业咨询"></el-option>
                  <el-option label="" value="互联网"></el-option>
                  <el-option label="" value="电子商务"></el-option>
                  <el-option label="" value="其他"></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="录入人" prop="creatorID">
                <el-select
                  class="input"
                  v-model="ruleForm.creatorID"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in creatorList"
                    :key="item.id"
                    :label="item.permission_group_title"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
        </el-row>

        <!-- 第三列 -->
        <el-row :gutter="20">
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="ruleForm.remarks"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="ruleForm.shortName"></el-input>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item label="城市" prop="region">
                <el-select
                  class="input1"
                  v-model="ruleForm.province"
                  @change="provinceChange"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in provinces"
                    :key="index"
                    label=""
                    :value="item"
                  ></el-option>
                </el-select>
                <el-select v-model="ruleForm.city" placeholder="请选择">
                  <el-option
                    label=""
                    :value="item"
                    v-for="(item, index) in cityList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple">
              <el-form-item style="float: right">
                <el-button @click="resetForm" size="small">清除</el-button>
                <el-button type="primary" size="small" @click="submitForm"
                  >搜索</el-button
                >
              </el-form-item>
            </div></el-col
          >
        </el-row>
      </el-form>
      <!-- 数据 -->
      <div class="datatips">
        <i class="el-icon-warning"></i>
        <span>数据一共{{ counts }}条</span>
      </div>
      <!-- 表格 -->
      <el-table style="width: 100%" :data="list">
        <el-table-column prop="number" label="试题编号" width="120">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录"> </el-table-column>
        <el-table-column
          prop="questionType"
          :formatter="formatQuestionType"
          label="题型"
        >
        </el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          width="280"
          #default="{ row }"
        >
          <div v-html="row.question"></div>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="180"
          :formatter="formatAddDate"
        >
        </el-table-column>

        <el-table-column
          prop="difficulty"
          :formatter="formatDifficulty"
          label="难度"
        >
        </el-table-column>

        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="" label="操作" width="180" #default="{ row }">
          <el-button
            title="预览"
            class="btn"
            icon="el-icon-view"
            circle
            type="primary"
            plain
            @click="preview(row.id)"
          ></el-button>
          <el-button
            @click="$router.push(`/questions/new?id=${row.id}`)"
            class="btn"
            title="修改"
            type="success"
            icon="el-icon-edit"
            circle
            plain
          ></el-button>
          <el-button
            title="删除"
            @click="del(row.id)"
            class="btn"
            type="danger"
            icon="el-icon-delete"
            circle
            plain
          ></el-button>
          <el-button
            @click="sift(row.id)"
            title="加入精选"
            class="btn"
            type="warning"
            icon="el-icon-check"
            circle
            plain
          ></el-button>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="questions.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="questions.pagesize"
        layout="->, prev, pager, next,sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 编辑弹出窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="45%">
      <el-row :gutter="20">
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【题型】:{{ formatQuestionType1(previewList.questionType) }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【编号】:{{ previewList.id }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【难度】:{{ formatDifficulty1(previewList.difficulty) }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【便签】:{{ previewList.tags }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【学科】:{{ previewList.subjectName }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【目录】:{{ previewList.directoryName }}
          </div></el-col
        >
        <el-col :span="6" class="col"
          ><div class="grid-content bg-purple">
            【方向】:{{ previewList.direction }}
          </div></el-col
        >
      </el-row>
      <hr />
      <span>【题干】:</span>
      <br />
      <div v-html="previewList.question" style="color: #4b4bff"></div>

      <div v-if="+previewList.questionType === 1">
        <span style="marginright: 8px">单选题</span>
        <span style="marginright: 8px"> 选项:</span>
        <span> (以下选中的选项为正确答案)</span>
        <div>
          <el-radio
            class="radio"
            :value="previewRadio"
            :label="item.id"
            v-for="item in previewList.options"
            :key="item.id"
            >{{ item.title }}</el-radio
          >
        </div>
      </div>
      <div v-else-if="+previewList.questionType === 2">
        <span style="marginright: 8px">多选题</span>
        <span style="marginright: 8px"> 选项:</span>
        <span> (以下选中的选项为正确答案)</span>
        <el-checkbox-group :value="checkList">
          <el-checkbox
            class="radio"
            v-for="item in previewList.options"
            :key="item.id"
            :label="item.id"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <div v-else>
        <span>{{ formatQuestionType1(previewList.questionType) }}</span>
        <span style="marginright: 8px">多选题</span>
      </div>

      <hr />
      <div>
        <span>【参考答案】:</span>
        <el-button type="danger" @click="videoBtn" size="mini"
          >视频答案预览</el-button
        >
        <br />
        <video v-if="videoShow" :src="previewList.videoURL" controls></video>
      </div>
      <hr />
      <span style="marginright: 5px">【答案解析】:</span>
      <div style="display: inline-block" v-html="previewList.answer"></div>
      <hr />
      <span>【题目备注】: {{ previewList.remarks }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  detail as detailQuestions,
  choiceAdd
} from '../../api/hmmm/questions'
import { difficulty, questionType } from '../../api/hmmm/constants'
import { simple } from '../../api/hmmm/subjects'
import { list as userList } from '../../api/base/users'
import { provinces, citys } from '../../api/hmmm/citys'
import { parseTime } from '../../utils'
import { simple as subjectSimple } from '../../api/hmmm/directorys'
import { simple as tagsSimple } from '../../api/hmmm/tags'
export default {
  data () {
    return {
      loading: false,
      tagsList: [],
      subjectList: [],
      checkList: [],
      videoShow: false,
      previewRadio: '',
      dialogVisible: false,
      counts: 0,
      ruleForm: {
        subjectID: null, // 学科
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        keyword: null, // 关键字
        province: null, // 企业所在省份
        city: null, // 企业所在城市
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        catalogID: null,
        tags: null
      },
      rules: {},
      questions: {
        page: 1,
        pagesize: 10
      },
      list: [],
      simpleList: [],
      creatorList: [],
      cityList: [],
      previewList: []
    }
  },
  async created () {
    this.getBasicList()
    this.getSimple()
    this.getUser()
  },
  computed: {
    // 城市
    provinces () {
      return provinces()
    }
  },
  methods: {
    // 省级城市变化
    provinceChange () {
      const res = citys(this.ruleForm.province)
      this.ruleForm.city = ''
      this.cityList = res
    },
    // 获取users列表
    async getUser () {
      const {
        data: { list }
      } = await userList()
      this.creatorList = list
    },
    async getSimple () {
      const { data } = await simple()
      this.simpleList = data
    },
    // 渲染题库
    async getBasicList () {
      this.loading = true
      const { data } = await list({ ...this.questions })
      this.list = data.items
      this.counts = data.counts
      this.questions.page = +data.page
      this.questions.pagesize = +data.pagesize
      this.loading = false
    },
    formatDifficulty (row, column, cellValue, index) {
      const res = difficulty.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    formatQuestionType (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === +cellValue)
      return res ? res.label : '未知'
    },
    handleSizeChange (pagesize) {
      this.questions.pagesize = pagesize
      this.questions.page = 1
      this.getBasicList()
    },
    handleCurrentChange (page) {
      this.questions.page = page
      this.getBasicList()
    },
    // 学科改变 获取id 发请求拿二级目录
    async simpleChange () {
      const { data } = await subjectSimple({
        subjectID: this.ruleForm.subjectID
      })
      this.subjectList = data
      const { data: tags } = await tagsSimple({
        subjectID: this.ruleForm.subjectID
      })
      this.tagsList = tags
    },
    // 筛选提交
    async submitForm () {
      this.questions = { ...this.questions, ...this.ruleForm }
      const { data } = await list({
        ...this.questions
      })
      this.list = data.items
      this.list = data.items
      this.questions.page = 1
    },
    // 重置表单
    resetForm () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm.province = ''
      this.ruleForm.city = ''
      this.tagsList = []
      this.subjectList = []
    },
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示')
        .then(async () => {
          if (this.list.length === 1 && this.questions.page > 1) {
            this.questions.page--
          }
          await remove({ id })
          this.getBasicList()
          this.$message.success('删除成功')
        })
        .catch(() => {})
    },
    async preview (id) {
      this.dialogVisible = true
      const { data } = await detailQuestions({ id })
      this.previewList = data
      if (+this.previewList.questionType === 1) {
        const res = this.previewList.options.find((item) => {
          return item.isRight === 1
        })

        this.previewRadio = res.id
      } else if (+this.previewList.questionType === 2) {
        this.previewList.options.forEach((item) => {
          if (item.isRight === 1) {
            this.checkList.push(item.id)
          }
        })
      }
    },
    // 格式化难度
    formatDifficulty1 (value) {
      const res = difficulty.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    // 格式化题目类型
    formatQuestionType1 (value) {
      const res = questionType.find((item) => item.value === +value)
      return res ? res.label : '未知'
    },
    videoBtn () {
      this.videoShow = true
    },
    // 加入精选
    async sift (id) {
      this.$confirm('此操作将该项目加入精选,是否继续', '提示')
        .then(async () => {
          if (this.list.length === 1 && this.questions.page > 1) {
            this.questions.page--
          }
          await choiceAdd({ id, choiceState: 1 })
          this.getBasicList()
          this.$message.success('添加成功')
        })
        .catch(() => {})
    },
    formatAddDate (row, column, cellValue, index) {
      return parseTime(cellValue)
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  span {
    font-size: 12px;
    color: pink;
  }
}
.input {
  width: 100%;
}

::v-deep .el-form-item__content {
  display: flex;
}
.input1 {
  margin-right: 5px;
}
.datatips {
  background-color: #f4f4f5;
  margin-bottom: 15px;
  color: #909399;
  padding: 8px 16px;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  span {
    font-size: 13px;
    line-height: 18px;
    margin-left: 10px;
  }
}
.btn {
  width: 32px;
  height: 32px;
  padding: 8px;
  // text-align: center;
  ::v-deep i {
    font-size: 12px;
  }
}
.col {
  padding: 10px 0;
}
.radio {
  display: block;
  margin: 15px 0;
}
video {
  width: 400px;
  height: 300px;
}
</style>
